<template>
    <div id="routers">
        <div class="box" @click="toPage1">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-all"></use>
            </svg>
        </div>
        <div class="box" @click="toPage2">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-warning"></use>
            </svg>
        </div>
        <div class="box" @click="toPage3">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-electronic"></use>
            </svg>
        </div>
        <div class="box" @click="toPage4">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-water"></use>
            </svg>
        </div>
        <div class="box" @click="toPage5">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fireHydrant"></use>
            </svg>
        </div>
        <div class="box" @click="toPage6">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-camera"></use>
            </svg>
        </div>
    </div>
</template>

<script>
export default{
    data:function(){
        return {

        }
    },
    methods:{
        toPage1:function(){
            console.log(1);
            this.$router.push("/fault/allequipment");
        },
        toPage2:function(){
            console.log(1);
            this.$router.push("/equipment/fireDetection");
        },
        toPage3:function(){
            console.log(1);
            this.$router.push("/equipment/safeElectricity");
        },
        toPage4:function(){
            console.log(1);
            this.$router.push("/equipment/fireWater");
        },
        toPage5:function(){
            console.log(1);
            this.$router.push("/equipment/outdoorFirefighting");
        },
        toPage6:function(){
            console.log(1);
            this.$router.push("/equipment/videoSurveillance");
        },
    }
}

</script>

<style scoped lang="less">
.text {
    position: absolute;
    color: #fff;
    top: -25px;
    display: block;
    font-size: 13px;
}

#routers {
    margin: 0 auto;
    width: 550px;
    height: 60px;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .box {
        width: 60px;
        height: 60px;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        position: relative;

        &:nth-child(1):hover {
            background-color: rgb(27, 119, 158);

            &:nth-child(1)::after {
                .text;
                content: '全部';
            }
        }

        &:nth-child(2):hover {
            background-color: rgb(27, 119, 158);

            &:nth-child(2)::after {
                .text;
                content: '火灾警报';
            }
        }

        &:nth-child(3):hover {
            background-color: rgb(27, 119, 158);

            &:nth-child(3)::after {
                .text;
                content: '用电安全';
            }
        }

        &:nth-child(4):hover {
            background-color: rgb(27, 119, 158);

            &:nth-child(4)::after {
                .text;
                content: '消防水';
            }
        }

        &:nth-child(5):hover {
            background-color: rgb(27, 119, 158);

            &:nth-child(5)::after {
                .text;
                content: '消防栓';
            }
        }

        &:nth-child(6):hover {
            background-color: rgb(27, 119, 158);

            &:nth-child(6)::after {
                .text;
                content: '视频监控';
            }
        }
    }
}

.icon {
    width: 2em;
    height: 2em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>